<template>
  <el-card class="box-card">
    日志工资管理
    <hr>
    <br>
    <el-row style="display: flex;justify-content: flex-start;">
      <!--搜索框-->
      <span style="">
         <el-button type="danger" @click="removeIds" icon="el-icon-delete" v-has="'log:remove'"
                    size="mini">批量删除</el-button>
        <el-input v-model="keyword" style="width: 200px" placeholder="请输入操作"
                  size="mini"></el-input>
        <el-button type="success" @click="selectTable" icon="el-icon-search"
                   size="mini" v-has="'log:list'">搜索</el-button>
      </span>
    </el-row>
    <br>
    <br>
    <!--表格数据及操作-->
    <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" v-has="'log:list'"
              tooltip-effect="dark">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" sortable>
      </el-table-column>
      <el-table-column prop="createTime" :formatter="dateForma" label="操作时间" width="200">
      </el-table-column>
      <el-table-column prop="operation" label="操作">
      </el-table-column>
      <el-table-column prop="method" label="请求方法">
      </el-table-column>
      <el-table-column prop="ip" label="ip地址">
      </el-table-column>
      <el-table-column prop="params" label="请求参数">
      </el-table-column>
    </el-table>
    <br>

    <!--分页条-->
    <el-pagination
      style="padding-top:15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "log",
    data() {
      return {
        tableData: [],   //表格数据
        keyword: '',   //查询输入框数据
        total: 0, // 总条数
        pageSize: 10,     // 每页显示的条数
        current: 1,  // 当前页码
        ids: []
      }
    },
    methods: {
      /**
       * 日期格式化
       * @param row
       * @param column
       * @returns {string}
       */
      dateForma(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      /**
       * 监听数据表格每页条数变化并更新表格数据
       * @param val
       */
      handleSizeChange(val) {
        this.getTableDate(val, this.current, null);
      },
      /**
       * 监听页码变化并更新表格
       * @param val
       */
      handleCurrentChange(val) {
        this.getTableDate(this.limit, val, null);
      },
      /**
       * 关键字查询
       */
      selectTable() {
        this.getTableDate(this.limit, this.current, this.keyword);
      },
      /**
       * 获取表格数据
       * @param limit
       * @param page
       * @param keyword
       */
      getTableDate(limit, page, keyword) {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/log/queryLog',
          data: {
            limit: limit,
            page: page,
            employeeName: keyword
          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          this.tableData = response.data.data.records;
          this.total = response.data.data.total; //totalcount
          this.current = response.data.data.current; //页数
        }).catch((error) => {
          console.log(error)
        })
      },
      removeIds() {
        var Logs = this.$refs.multipleTable.selection
        for (var i = 0; i < Logs.length; i++) {
          this.ids[i] = Logs[i].id;
        }

        this.$axios({
          method: 'delete',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/log/removeLog',
          data: {
            ids: this.ids
          }
        }).then((response) => {
          if (response.data.msg == "删除成功！") {
            this.$message.success(response.data.msg);
            this.getTableDate(this.pageSize, this.current);
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      /**
       * 页面渲染调用一次获取表格
       */
      this.getTableDate(this.pageSize, this.current);
    }
  }
</script>

<style scoped>
  #info >>> .el-input__inner {
    border: 0;
  }
</style>
